<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>香港各区疫情数据可视化</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        #chart-container {
            width: 800px;
            height: 500px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;">香港各区累计确诊数据</h1>
    <div id="chart-container"></div>
    
    <script>
        // 初始化图表
        const chartDom = document.getElementById('chart-container');
        const myChart = echarts.init(chartDom);
        
        // 从后端获取数据
        fetch('/api/data')
            .then(response => response.json())
            .then(data => {
                // 准备图表数据
                const regions = Object.keys(data);
                const values = Object.values(data);
                
                // 配置图表选项
                const option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { type: 'shadow' }
                    },
                    xAxis: {
                        type: 'category',
                        data: regions,
                        axisLabel: {
                            rotate: 45
                        }
                    },
                    yAxis: {
                        type: 'value',
                        name: '累计确诊数'
                    },
                    series: [{
                        name: '累计确诊',
                        type: 'bar',
                        data: values,
                        itemStyle: {
                            color: '#c23531'
                        }
                    }]
                };
                
                // 渲染图表
                myChart.setOption(option);
            })
            .catch(error => console.error('Error:', error));
            
        // 响应窗口大小变化
        window.addEventListener('resize', function() {
            myChart.resize();
        });
    </script>
</body>
</html>